<template>
  <el-card class="mb-6" shadow="never">
    <template #header>
      <div class="d-flex justify-space-between">
        <el-text :size="'large'"> 快捷操作</el-text>
      </div>
    </template>
    <el-row :gutter="24">
      <el-col :span="8">
        <div class="quick-action-item d-flex flex-column align-center" @click="toPage('/system/user-info')">
          <div class="icon">
            <i-icon icon="mdi-account-cog-outline" />
          </div>
          <div class="title">个人中心</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="quick-action-item d-flex flex-column align-center" @click="toPage('/wechat/user')">
          <div class="icon">
            <i-icon icon="mdi-wechat" />
          </div>
          <div class="title">微信用户</div>
        </div>
      </el-col>

      <el-col :span="8">
        <div class="quick-action-item d-flex flex-column align-center" @click="toPage('/system/org')">
          <div class="icon">
            <i-icon icon="mdi-file-tree" />
          </div>
          <div class="title">组织机构</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="quick-action-item d-flex flex-column align-center" @click="toPage('/system/role')">
          <div class="icon">
            <i-icon icon="mdi-table-key" />
          </div>
          <div class="title">角色管理</div>
        </div>
      </el-col>
    </el-row>
  </el-card>

</template>

<script setup lang="ts">

import IIcon from "~/icesoft/components/icon/IIcon.vue";
import { useRouter } from "vue-router";
import { useMenuStore } from "~/store/modulers/menu";
const router = useRouter();
const menuStore = useMenuStore();

function toPage(path: string) {
  router.push(path);
  menuStore.setDefaultActive(path)
}
</script>

<style scoped lang="scss">
.quick-action-item {
  text-align: center;
  margin-bottom: 24px;
  transition: 0.3s cubic-bezier(0.4, 0, 0.6, 1) !important;

  .icon {
    transition: 0.2s cubic-bezier(0.4, 0, 0.6, 1) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    background-color: var(--el-color-info-light-9);
    padding: 6px;
    border-radius: 4px;
  }

  .title {
    transition: 0.2s cubic-bezier(0.4, 0, 0.6, 1) !important;
    padding-top: 8px;
    font-size: 12px;
  }

  &:hover {
    cursor: pointer;

    .icon {
      background-color: var(--el-color-primary-light-8);
      color: var(--el-color-primary);
    }

    .title {
      color: var(--el-color-primary);
    }
  }
}
</style>
